<DocMatIcon></DocMatIcon>

<h5 class="mat-h5">Examples</h5>

<DemoContainer>
    <Content>

        <MatIcon Icon="favorite"></MatIcon>
        <MatIcon Icon="@MatIconNames.Image"></MatIcon>
        <MatIcon Icon="@MatIconNames._3d_rotation"></MatIcon>

        <MatIcon>work</MatIcon>
        <MatIcon>@MatIconNames.Assistant</MatIcon>
    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"

        <MatIcon Icon=""favorite""></MatIcon>
        <MatIcon Icon=""@MatIconNames.Image""></MatIcon>
        <MatIcon Icon=""@MatIconNames._3d_rotation""></MatIcon>

        <MatIcon>work</MatIcon>
        <MatIcon>@MatIconNames.Assistant</MatIcon>
    ")></BlazorFiddle>
    </SourceContent>
</DemoContainer>


<h5 class="mat-h5">All material icons for MatBlazor</h5>

<style>
    .demo-mat-icon-cat h4 {
        padding-top: 20px;
        padding-left: 20px;
    }

    .demo-mat-icon-icon-container {
        width: 100%;
        max-width: 100%;
    }

    .demo-mat-icon-icon-item {
        width: 250px;
        height: 80px;
        text-align: center;
        display: inline-block;
    }
</style>

@foreach (var cat in MatIconCategories.Data)
{
    <div class="mat-elevation-z5 demo-mat-icon-cat">
        <h4 class="mat-h6">@cat.Name</h4>
        <div class="demo-mat-icon-icon-container mdc-theme--surface">

            @foreach (var icon in cat.Icons)
            {
                <div class="demo-mat-icon-icon-item">
                    <div>
                        <MatIcon Icon="@icon.Id"></MatIcon>
                    </div>
                    <div>@icon.Id</div>
                </div>
            }
        </div>
    </div>
}